<template>
  <div>
    <el-container>
      <el-header>
        <!-- 标题栏 -->
        <img
          src="@/assets/logo.png"
          alt=""
          style="width: 40px; position: relative; top: 10px"
        />
        <span style="font-size: 20px; margin-left: 15px; color: white"
          >手拉手带小白做毕设</span
        >

        <!-- 用户信息栏 -->
        <div style="position: absolute; right: 20px; top: 10px">
          <el-dropdown @command="handleCommand">
            <div class="user-info" style="align-items: center">
              <img
                src="https://picsum.photos/id/237/200/200"
                alt="头像"
                class="user-avatar"
              />
              <span class="user-name" style="margin: 8px; color: #fff">{{
                $store.getters.getUserInfo.username
              }}</span>
              <i class="el-icon-arrow-down" style="color: white"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout" divided>
                <i class="el-icon-switch-button"></i> 退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
    </el-container>

    <el-container>
      <el-aside>
        <!-- 菜单栏 -->
        <el-menu
          :default-active="$router.path"
          router
          class="el-menu-vertical-demo"
          background-color="#333"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>

          <el-submenu
            index="2"
            v-if="$store.getters.getUserInfo.role !== 'ROLE_STUDENT'"
          >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/adminInfo"
                v-if="$store.getters.getUserInfo.role === 'ROLE_ADMIN'"
                >管理员管理</el-menu-item
              >
              <el-menu-item
                index="/userInfo"
                v-if="
                  $store.getters.getUserInfo.role === 'ROLE_USER' ||
                  $store.getters.getUserInfo.role === 'ROLE_ADMIN'
                "
                >用户管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/bookInfo">图书信息</el-menu-item>
              <el-menu-item index="/bookType">分类信息</el-menu-item>
              <el-menu-item index="/borrowInfo">借阅信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>应用管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/audit">请假审批</el-menu-item>
              <el-menu-item index="/borrow">图书借阅</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
             <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/log">日志管理</el-menu-item>
              <el-menu-item index="/notice">系统公告</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Index",
  methods: {
    handleCommand(command) {
      if (command === "logout") {
        console.log("logout");
        this.$confirm("确定要退出登录吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 清除 store 中的用户信息
            this.$store.dispatch("Logout");
            this.$message.success("已退出登录");
          })
          .catch(() => {
            this.$message.info("已取消退出");
          });
      }
    },
  },
};
</script>



<style>
.el-header {
  position: relative;
  background-color: #4a5359;
  color: #333;
  text-align: left;
}

.user-info {
  display: flex;
}

.user-avatar {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.el-aside {
  background-color: #333;
  color: #333;
  height: 100vh;
  text-align: left;
  line-height: 40px;
  min-height: 100vh;
}

.el-menu {
  border-right: 0;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
  line-height: 160px;
}

.main {
  /* position: relative; */
  height: 100vh;
}
</style>